<!-- 工单管理 -->
<template>
	<div class="ai-history" v-loading="state.loading">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="开始时间">
					<el-date-picker v-model="state.queryParams.startTime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" />
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker v-model="state.queryParams.endTime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<div class="chat-box">
			<div class="container">
				<div class="chat-list">
					<template v-for="(item, index) in state.logData">
						<div class="msg-item me">
							<div class="user-img">{{item.userName[0]}}</div>
							<div>
								<div class="name">{{item.userName}}</div>
								<div class="msg-group">{{item.message}}</div>
								<div class="time">{{item.createTime}}</div>
							</div>
						</div>
						<div class="msg-item ai">
							<div class="user-img">AI</div>
							<div class="msg-box">
								<div class="msg-group">{{item.respond}}</div>
								<div class="bt-box">
									<div class="time">{{item.createTime}}</div>
									<div class="right">
										<div v-if="item.feedBack == 1" class="icon-box">
											<img class="icon" style="width: 16px;height:16px;" :src="PUBLIC_PATH+'/static/image/feed-1.png'"/>
											有用
										</div>
										<div v-if="item.feedBack == 2" class="icon-box">
											<img class="icon" style="width: 16px;height:16px;" :src="PUBLIC_PATH+'/static/image/feed-2.png'"/>
											无用
										</div>
										<div class="icon-box pointer" @click="showResource(item)">
											<img class="icon" style="width: 16px;" :src="PUBLIC_PATH+'/static/image/source.png'"/>
											<span>数据源</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</div>
				<div class="paging-box">
					<el-pagination
						v-model:currentPage="state.tableParams.page"
						v-model:page-size="state.tableParams.pageSize"
						:total="state.tableParams.total"
						:page-sizes="[10, 20, 50, 100]"
						small
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						layout="total, sizes, prev, pager, next, jumper"/>
				</div>
			</div>
		</div>

		<resourceModal ref="resourceModalRef"></resourceModal>
	</div>
</template>

<script setup name="AIHistory">
import { onMounted, reactive, ref } from 'vue';
import {useRouter, useRoute} from "vue-router";
import { ElMessage } from 'element-plus';
import {chatPage} from "/@/api/AI/index.js";
import resourceModal from "./modules/resourceModal.vue";

const router = useRouter();
const route = useRoute();
const resourceModalRef = ref();

const PUBLIC_PATH = import.meta.env.VITE_PUBLIC_PATH;
const state = reactive({
	loading: false,
	queryParams: {
		startTime: undefined,
		endTime: undefined,
	},
	tableParams: {
		page: 1,
		pageSize: 20,
		field: 'createTime', // 默认的排序字段
		order: 'descending', // 排序方向
		descStr: 'descending', // 降序排序的关键字符
		total: 0,
	},
});

onMounted(async () => {
	handleQuery();
});

// 查询操作
const handleQuery = async () => {
	if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
	if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;

	state.loading = true;
	let params = Object.assign(state.queryParams, state.tableParams);

	var res = await chatPage(params);
	state.logData = res.data.result?.items || [];
	state.tableParams.total = res.data.result?.total;
	state.loading = false;
};

// 重置操作
const resetQuery = () => {
	state.queryParams.startTime = undefined;
	state.queryParams.endTime = undefined;
	handleQuery();
};

// 改变页面容量
const handleSizeChange = (val) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val) => {
	state.tableParams.page = val;
	handleQuery();
};

// 显示数据源
const showResource = (row) => {
	resourceModalRef.value.open(row.datasource);
};

</script>

<style lang="scss" scoped>
.ai-history {
	display: flex;
	flex-direction: column;
	.chat-box {
		height: 0;
		flex: 1;
		width: 100%;
		padding-top: 10px;
		
		.container {
			margin: 0 auto;
			width: 100%;
			max-width: 800px;
			height: 100%;
			background: #fff;
			box-shadow: 0 0 12px 0 rgba(0,0,0,0.1);
			border-radius: 8px;
			padding: 10px;
			display: flex;
			flex-direction: column;
			.chat-list {
				background: #EFEFEF;
				height: 0;
				flex: 1;
				overflow: auto;
				padding: 15px;
			}
			.paging-box {
				height: 30px;
			}
		}
	}
}

.msg-item {
	position: relative;
	padding-right: 45px;
	&:not(:last-child) {
		margin-bottom: 20px;
	}
	&.me {
		padding-right: 0;
		padding-left: 45px;
		.user-img {
			right: auto;
			left: 0;
			background: #60A5FA;
		}
		.msg-group {
			float: left;
			width: auto;
			margin-bottom: 5px;
			background: #FFF9EB;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
		}
		.name, .time {
			text-align: left;
		}
		.time {
			display: block;
			clear: both;
			padding: 0 10px;
			font-size: 12px;
			color: #aaa;
		}
	}
	&.ai {
		&:after {
			content: '';
			display: block;
			clear: both;
		}
		.msg-box {
			min-width: 300px;
			float:right;
		}
	}
	.user-img {
		position: absolute;
		top: 0;
		right: 0;
		width: 35px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background: #6EE7B7;
		font-size: 12px;
		border-radius: 50%;
		color: #fff;
	}
	.name {
		padding: 0 10px;
		font-size: 12px;
		color: #aaa;
	}
	.msg-group {
		margin-top: 5px;
		min-width: 100px;
		width: 100%;
		background: #fff;
		padding: 10px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.time {
		padding: 0 10px;
		font-size: 12px;
		color: #aaa;
	}
	.bt-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		background: #fff;
		padding: 5px 10px 5px 0;
		border-top: 1px solid #f1f1f1;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		.right {
			display: flex;
		}
		.icon-box {
			display: flex;
			align-items: center;
			margin-left:10px;
			font-size: 12px;
			&.pointer {
				cursor: pointer;
			}
			.icon {
				margin-right: 5px;
				max-width: 16px;
				max-height: 16px;
			}
		}
	}
}
</style>
